<template>
  <div>
    <p style="text-align: center">忘记密码</p>
    <van-form @submit="onSubmit">
      <van-field v-model="user.password" label="新密码" name="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
      <van-field v-model="user.mobile" label="手机号码" name="手机号码" placeholder="手机号码" :rules="[{ required: true, message: '请填写手机号' }]" />
      <van-field v-model="user.code" label="验证码" name="验证码" placeholder="验证码" :rules="[{ required: true, message: '请填写验证码' }]" />
      <div style="margin: 2.6rem;">
        <van-button round block @click="register">找回密码</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'YanxuanshangchengForgopassword',
  data() {
    return {
      user: {
        password: 'wushuyi2002',
        mobile: '18878415372',
        code: '123456'
      }
    }
  },
  methods: {
    // 注册按钮
    register() {
      // 调用 注册 接口
      this.$post(this.$api.authReset, this.user)
        .then(result => {
          console.log(result.data)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 正则校验
    onSubmit(values) {
      console.log('submit', values)
    }
  }
}
</script>

<style lang="less" scoped>
.van-form {
  margin-top: 60%;
  .van-field {
    border-bottom: 0.1rem solid #ccc;
  }
  .van-button {
    color: #fff;
    background-color: #ab956c;
  }
  > div {
    display: flex;
    justify-content: space-between;
    span {
      padding: 0 1rem;
    }
  }
}
</style>
